<template>
    <div>
        <div class="head">
            <div class="iconfont icon-zuojiantou myicon" @click.stop="back"></div>
            <div class="title">添加朋友</div>
        </div>

        <div class="headImg_and_name">
            <div class="headImg_and_name_inner">
                <img src="http://admin.xukunqi.com/public/static/headimage.png" height="75" width="75" class="head_img">
                <div class="name_and_username">
                    <div class="name">
                        {{toname}}
                    </div>
                    <div class="username">
                        {{toid}}
                    </div>
                </div>
            </div>
        </div>

        <div class="appendMessage">
            <input class="appendMessage_input" type="text" placeholder="附加消息" v-model="appendMessage">
        </div>

        <div class="addFriend" @click.stop="addFriend">
                发起好友申请
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {add_userRequest} from "../../request/api";
    import Cookies from 'js-cookie';
    import {Toast} from 'vant';

    Vue.use(Toast);
    export default {
        name: "addFriend_detail",
        data(){
          return {
              toid:"",
              toname:"",
              appendMessage:"",
              type:"",
              state:null,
          }
        },
        mounted(){
            this.toid=this.$route.query.id;
            this.toname=this.$route.query.name;
        },
        methods:{

            back(){
                this.$router.back();
            },

            addFriend(){

                //往好友申请表里添加一行数据
                let data={
                    "fromid":Cookies.get('username'),
                    "fromName":this.$store.state.myselfAttribute.name,
                    "toid":this.toid,
                    "appendMessage":this.appendMessage,
                    "isAgree":false,
                    "isRead":false,
                    "isRefuse":false,
                }

                add_userRequest(data).then(res=>{
                    this.type=res.data.type;
                    this.state=res.data.state;

                    let to_socket=data;
                    to_socket.type='addFriend';
                    this.$store.state.websocket.send(JSON.stringify(to_socket));
                    console.log("发送了");
                    if(res.data.state === 200){
                        Toast.success("申请成功");
                        setTimeout(()=>{
                            this.$router.back();
                        },400);
                    }else{
                        Toast.fail("申请失败");
                        setTimeout(()=>{
                            this.$router.back();
                        },400);
                    }

                })

            }
        }
    }
</script>

<style scoped>
    .head{height: 50px;width: 100%;display: flex;flex-direction: row;}
    .myicon{font-size: 21px;position: fixed;top: 16px;left: 21px;}
    .title{font-size: 18px;line-height: 50px;text-align: center;flex-grow: 1;}

    .headImg_and_name{width: 100%;}
    .headImg_and_name_inner{width: calc(100% - 40px); margin: 0 auto;display: flex;flex-direction: row;background-color: #f8f8f8;border-radius: 15px;}
    .head_img{border-radius: 5px;margin-left: 5px;}
    .name_and_username{margin-left: 7px;}
    .name{font-size: 18px;line-height: 18px;margin-top: 20px;}
    .username{font-size: 12px;line-height: 12px;margin-top: 9px;}

    .appendMessage{height: 48px;width: calc(100% - 40px); margin: 0 auto;background-color: #f8f8f8;margin-top: 18px;}
    .appendMessage_input{height: 100%;width: 100%;border: none;outline: none;background-color: #f8f8f8;}
    .addFriend{height: 45px;width: calc(100% - 40px); margin: 17px auto;background-color: #1aad19;color: white;outline: none;border-radius: 5px;font-size: 17px;line-height: 45px;text-align: center;}
</style>